<template>
  <div class="h-full">
    <div class="cont-box flex mt-8 justify-between mx-auto">
      <div class="left">
        <h3>{{ translateTitle('Dams.HSM.编辑数据项') }}</h3>
        <div v-if="treeInfo.length" class="drag-table">
          <dragTree :list="treeInfo" />
        </div>
      </div>
      <div class="right">
        <h3>{{ translateTitle('Dams.HSM.预览数据项') }}</h3>
        <div class="preview">
          <mobilePreview :tree-data="treeInfo" />
        </div>
      </div>
    </div>
    <el-divider style="margin-top: 30px" />
    <div class="flex justify-center btn-group">
      <el-button size="large" type="primary" @click="backTo(2)">{{ translateTitle('Dams.HSM.上一步') }}</el-button>
      <el-button size="large" type="primary" @click="preview">{{ translateTitle('Dams.HSM.预览发送') }}</el-button>
    </div>
    <previewDialog v-model:show="isPreview" :tree-data="treeInfo" />
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import dragTree from './dragTree.vue'
  import previewDialog from './previewDialog'
  import mobilePreview from './mobilePreview'
  import { getStorage } from '@/utils/tools'

  export default {
    name: 'Step3',
    components: {
      dragTree,
      previewDialog,
      mobilePreview,
    },
    emits: ['changeActive'],
    data() {
      return {
        excelData: getStorage('excelData'),
        treeInfo: getStorage('treeInfo') || [],
        tableConfig: getStorage('tableConfig'),
        isPreview: false,
      }
    },
    mounted() {},
    methods: {
      translateTitle,
      backTo(num) {
        this.$emit('changeActive', num)
      },
      preview() {
        this.isPreview = true
      },
    },
  }
</script>
<style lang="scss" scoped>
  .base-color {
    color: #6ab8b8;
  }
  .cont-box {
    width: 98%;
    .left {
      width: 55%;
    }
    .right {
      width: 44.5%;
    }
    h3 {
      background-color: #d7d7d7;
      line-height: 2;
      box-sizing: border-box;
      padding: 6px 0 6px 10px;
      font-size: 16px;
    }
  }
  .btn-group {
    padding: 30px 0;
  }
  .preview {
    overflow-y: auto;
    max-height: 546px;
    box-shadow: 0px 0px 0px 6px #fafcff;
    margin: 6px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
